import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native'
import flex from '../../../configs/flex'
import fontsize from '../../../configs/fontsize'
import Icon from '../../public/icon'
import { px2dp } from 'rn-xiaobu-utils'
import NavigationService from '../../../utils/NavigationService';

export default class BusInfo extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      showSchedule: true
    }
  }
  render () {
    return (
      <View>
        <View style={[styles.wrapper, flex.flexV]}>
          <View style={[flex.flexH, flex.flexHsb]}>
            <View style={[flex.flexH, flex.flexVc]}>
              <Text style={[fontsize.fontsize28, styles.boldFont]}>{this.props.businfo.startStation}</Text>
              <Icon color={'#999999'} name={'next'}
                size={22}></Icon>
              <Text style={[fontsize.fontsize28, styles.boldFont]}>{this.props.businfo.endStation}</Text>
            </View>
            <TouchableOpacity onPress={()=>{ this.props.changeDirction() }}>
              <Icon name={'revesing'} size={36}/>
            </TouchableOpacity>
          </View>
          <Text style={[styles.price, fontsize.fontsize22]}>
            {/* 票价：{(this.props.price / 100).toFixed(2)}元 */}
          票价：{this.props.price}元
          </Text>
        </View>
        {this.props.businfo.startTime || this.props.businfo.endTime || this.props.nextTime || this.state.showSchedule
          ? <View style={[styles.timeWrapper, flex.flexH, flex.flexHsb, flex.flexVc]}>
            <View style={[flex.flexH]}>
              {this.props.businfo.startTime
                ? <View style={[flex.flexV, styles.marginSpace]}>
                  <Text style={[fontsize.fontsize22, styles.timeInfoText]}>首</Text>
                  <Text style={[fontsize.fontsize26]}>{this.props.businfo.startTime}</Text>
                </View> : null
              }
              {this.props.businfo.endTime
                ? <View style={[flex.flexV, styles.marginSpace]}>
                  <Text style={[fontsize.fontsize22, styles.timeInfoText]}>末</Text>
                  <Text style={[fontsize.fontsize26]}>{this.props.businfo.endTime}</Text>
                </View> : null
              }
              {this.props.nextTime
                ? <View style={[flex.flexV]}>
                  <Text style={[fontsize.fontsize22, styles.timeInfoText]}>下一班发车时间</Text>
                  <Text style={[fontsize.fontsize26]}>{this.props.nextTime}</Text>
                </View> : null
              }
            </View>
            {this.state.showSchedule
              ? <TouchableOpacity onPress={()=>{
                NavigationService.navigate('TimeTables', {
                  startstation: this.props.businfo.startStation,
                  endstation: this.props.businfo.endStation,
                  starttime: this.props.businfo.startTime,
                  endtime: this.props.businfo.endTime,
                  type: 1,
                  id: 1011,
                  name: this.props.lineName
                })
              }}><Icon name={'timelist'} size={40}></Icon></TouchableOpacity> : null}
          </View>
          : null}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    width: px2dp(750),
    padding: px2dp(30),
    backgroundColor: '#ffffff'
  },
  boldFont: {
    fontWeight: 'bold'
  },
  price: {
    color: '#999999',
    marginTop: px2dp(17)
  },
  timeWrapper: {
    backgroundColor: '#F9FAFA',
    width: px2dp(750),
    height: px2dp(100),
    paddingHorizontal: px2dp(30)
  },
  timeInfoText: {
    color: '#999999',
    marginBottom: px2dp(10)
  },
  marginSpace: {
    marginRight: px2dp(60)
  }
})